<template>
    <div class="invoice-list">
        <!-- 顶部导航 -->
        <van-nav-bar title="发票抬头" left-arrow @click-left="onClickLeft" />

        <!-- 添加发票按钮 -->
        <van-button
            type="primary"
            icon="plus"
            size="small"
            block
            to="/invoice/add"
            >新增发票抬头</van-button
        >
        <!-- 列表为空时，显示 -->
        <van-empty
            v-if="list.length === 0"
            description="暂无发票抬头，赶快添加吧！"
        />
        <!-- 渲染列表 -->
        <van-row
            type="flex"
            justify="space-between"
            align="center"
            v-for="(item, index) in list"
            :key="index"
        >
            <van-col>
                <p>{{ item.name }}</p>
                <van-tag plain v-if="item.type === 1">企业</van-tag>
                <van-tag plain v-else-if="item.type === 2"
                    >非企业性单位</van-tag
                >
                <van-tag plain v-else-if="item.type === 3">个人</van-tag>
                <van-tag plain v-else>未知</van-tag>

                <van-tag plain>默认</van-tag>
            </van-col>
            <van-col>
                <van-icon @click="editInvoice(item.id)" name="arrow" />
            </van-col>
        </van-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            const { code, data, message } = await this.$http.get('/invoices');
            if (code !== 200) {
                this.$toast({
                    type: 'fail',
                    message,
                });
                return;
            }
            this.list = data;
        },
        onClickLeft() {
            console.log('返回');
        },
        editInvoice(id) {
            this.$router.push(`/invoice/edit/${id}`);
        },
    },
};
</script>

<style lang="less" scoped>
.van-button {
    width: 95%;
    margin: 10px auto;
}

.invoice-list {
    background-color: #f8f6f9;
    height: 100vh;
}

.van-row {
    background-color: #fff;
    margin: 10px auto;
    width: 90%;
    padding: 10px;
    border-radius: 10px;
}

.van-tag {
    margin: 5px;
}
</style>
